<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备分组</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
    <link href="{{ url_for('static',filename='plugins/bootstrap-table/bootstrap-table.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/font-awesome.min.css') }}">
    <link href="{{ url_for('static',filename='plugins/font-awesome/css/font-awesome.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='css/style.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/public.css') }}">
    <link href="{{ url_for('static',filename='plugins/toastr.min.css') }}" rel="stylesheet">
    <style>
        .bootstrap-table .table thead>tr>th{
            text-align: center;
        }
        .manage-title {
            width: 73px;
        }
        .form-manage {
            width: 71%;
        }
        .form-manage2 {
            width: 86%;
        }
    </style>
</head>
<body style="background-color:#eee" >
<div id="box" style="margin: 0 0.5%;">
    <div class="ibox border-all contentBox" >
        <div class="ibox-title">
            <h5>设备分组</h5>
        </div>
        <div class="ibox-content" style="position: relative;">
            <button class="btn btn-default pull-right my-btn my-btn-remove" onclick="deleteClick()">删除</button>
            <button class="btn btn-default pull-right my-btn my-btn-pencil" onclick="editClick()">编辑</button>
            <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addBtnClick()">添加</button>
            <button class="btn btn-default my-btn my-search-btn my-btn-search" style="top: 16px;left: 222px;">查询</button>
            <table id="table"
                   data-toggle="table"
                   data-toolbar=".toolbar"
                   data-pagination="true"
                   data-maintain-selected="true"
                   data-search="true"
                   data-show-refresh="true"
                   data-search-align="left"
                   data-toolbar-align="right">
                <thead>
                <tr>
                    <th data-align="center" data-width="80" data-field="id">ID</th>
                    <th data-align="center" data-width="300" data-field="name">设备分组名称</th>
                    <th data-align="center" data-width="150" data-field="code">编码</th>
                    <th data-align="center" data-width="200" data-field="icon" data-formatter="checkBoxFormatter">图标</th>
                    <th data-align="center" data-width="100" data-field="device_num">设备数量</th>
                    <th data-align="center" data-width="300" data-field="description">描述</th>
                    <th data-align="center" data-width="400" data-field="details">详情</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <!--添加模块-->
    <div id="addModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{modalType}}分组</h4>
                </div>
                <div class="modal-manage">
                    <!--填写名称-->
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>设备组名称<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage" placeholder="请输入名称" v-model="modalData.name">
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>编码<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage" placeholder="请输入编码" v-model="modalData.code">
                    </div>
                    <div class="form-group col-xs-6" style="position: relative;">
                        <div class="manage-title">
                            <span style="margin-right: 12px">图标</span>

                        </div>
                        <input type="text" class="form-control form-manage" id="icon">
                        <i id="icon2" v-bind:class="modalData.icon" style="position: absolute;left:102px;top: 8px;font-size: 14px;color: #333"></i>
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span style="margin-right: 12px">描述</span>
                        </div>
                        <input type="text" class="form-control form-manage" placeholder="请输入描述" v-model="modalData.description">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span style="margin-right: 12px">详情</span>
                        </div>
                        <input type="text" class="form-control form-manage2" placeholder="请输入详情" v-model="modalData.details">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="add()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--删除模态框-->
    <div id="deleteModal" class="modal fade">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="float: left;">温馨提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-manage">
                    <img src="{{ url_for('static',filename='image/delete.png') }}" alt="" style="float: left;margin-left: 20px">
                    <h3 class="text-center" style="float: left;margin-top: 57px;margin-left: 40px">是否删除当前项</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="deleteTable()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--图标模态框-->
    <div id="iconModal" class="modal fade">
        <div class="modal-dialog" style="width: 800px!important;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">图标</h4>
                </div>
                <div class="modal-manage" style="height:700px;">
                    <iframe id="iconIframe" src="../fontIcon.html" width="100%" height="100%" frameborder="0" seamless></iframe>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
<!-- 全局js -->
<script src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static',filename='plugins/bootstrap-table/bootstrap-table.js') }}"></script>
<script src="{{ url_for('static',filename='plugins/bootstrap-table/bootstrap-table-zh-CN.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery.sparkline.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/echarts.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/vue.min.js') }}"></script>
<!--深拷贝-->
<script src="{{ url_for('static',filename='js/publicServe.js') }}"></script>
<script src="{{ url_for('static',filename='plugins/toastr/toastr.min.js') }}"></script>
<script>
    var vm = new Vue({
        el:box,
        data:{
            modalType:'添加',           //模态框 添加||编辑类型
            tableList:[],               //table数据
            modalData:{
                name:'',            //名称
                code:'',              //编码
                icon:'fa fa-folder-o',             //图标
                description:'',               //描述
                details:'',              //详情
                dis_order:1,            //排序
            }
        }
    });
    // 图标input点击
    $('#icon').focus(function () {
        $("#iconModal").modal('show');
    });
    //iframe点击
    $("#iconIframe").on("load", function(event){
        $(".fa-hover",this.contentDocument).click(function(){
            $("#iconModal").modal('hide');
            var icon = $(this).find('i').attr('class');
            $('#icon2').removeClass().addClass(icon);
            vm.modalData.icon = icon;
        });
    });
    //为列表添加图标样式
    function checkBoxFormatter(value, row, index) {
        return [
            '<i class="'+row.icon+'" style="font-size: 14px;color: #333;display:block"></i>'
        ].join('');
    }
    // 数据列表
    var $table = $('#table');
    //为bootstrapTable添加每一行的事件监听
    $table.on('click-row.bs.table', function (r, row, element) {
        $('.table-line-active').removeClass('table-line-active');
        $(element).addClass('table-line-active');
        //点击以后将当前行的数据赋值给vm.modalData
        vm.modalData = copyFun(row);
    });
    $table.bootstrapTable({
        columns:                 //列表序号
            [{
                //field: 'Number',//可不加
                // title: 'Number',//标题  可不加
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }],
    });

    //获取table信息 并且绘制
    function tableList() {
        $.ajax({
            url: 'http://127.0.0.1:8080/core/device_group/get_all/',
            type: 'POST',
            dataType: "json",
            data:'',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success==1) {
                    vm.tableList=response.data;
                    //获取table信息 并且绘制
                    $table.bootstrapTable('load', vm.tableList);
                }else{
                    toastr.info(response.error_msg)
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //添加 确定
    function add() {
        //深拷贝
        var newModalData = copyFun(vm.modalData);
        if(vm.modalType=='添加'){
            if (!vm.modalData.name) {
                toastr.info('设施组名称不能为空!');
                return
            }
            if (!vm.modalData.code) {
                toastr.info('编码不能为空!');
                return
            }
            $.ajax({
                url: 'http://127.0.0.1:8080/core/device_group/add/',
                type: 'POST',
                dataType: "json",
                data:JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    if (response && response.success==1) {
                        $("#addModal").modal('hide');
                        vm.tableList=response.data;
                        //重新绘制table信息
                        tableList();
                        toastr.success('添加成功')
                    }else{
                        toastr.info(response.error_msg)
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }else{
            $.ajax({
                url: 'http://127.0.0.1:8080/core/device_group/edit/',
                type: 'POST',
                dataType: "json",
                data:JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    if (response && response.success==1) {
                        $("#addModal").modal('hide');
                        vm.tableList=response.data;
                        //重新绘制table信息
                        tableList();
                        toastr.success('编辑成功')
                    }else{
                        toastr.info(response.error_msg)
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }

    }
    //删除模态框
    function deleteTable(){
        $.ajax({
            url: 'http://127.0.0.1:8080/core/device_group/del/',
            type: 'POST',
            dataType: "json",
            data:JSON.stringify({id:vm.modalData.id}),
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success==1) {
                    $("#deleteModal").modal('hide');
                    //重新绘制table信息
                    tableList();
                    toastr.success('删除成功')
                }else{
                    toastr.info(response.error_msg)
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }


    var submit = function () {
            var newModalData = copyFun(vm.modalData);
            if (vm.modalTitle == '添加') {
                $.ajax({
                url: '/core/device_group/add/',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify(newModalData),
                async: true,
                contentType: 'application/json',
                success: function (response) {
                    $("#addModal").modal('hide');
                    $("#table").bootstrapTable('refreshOptions', {pageNumber: 1});
                    if (response.success == 1)
                        toastr.success('提示：' + "添加成功")
                    else
                        toastr.error('提示：' + response.error_msg)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
            }
            else {
                $.ajax({
                url: '/iot/device_group/edit/',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify(newModalData),
                async: true,
                contentType: 'application/json',
                success: function (response) {
                    $("#addModal").modal('hide');
                    $("#table").bootstrapTable('refreshOptions', {pageNumber: 1});
                    if (response.success == 1)
                        toastr.success('提示：' + "编辑成功")
                    else
                        toastr.error('提示：' + response.error_msg)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
            }

        }

    //添加
    function addBtnClick(){
        //清空 vm.modalData 中的值
        vm.modalData = { name: '', code: '',icon:'fa fa-folder-o',description:'',details:'',dis_order:1};
        $('.table-line-active').removeClass('table-line-active');
        vm.modalType='添加';
        $("#addModal").modal('show');
    }
    //编辑
    function editClick(){
        if (!vm.modalData.id) {//是id
            toastr.info('编辑时最少需要选中一行!');
            return
        }
        vm.modalType='编辑';
        $("#addModal").modal('show');
    }
    //删除
    function deleteClick(){
        if (!vm.modalData.id) {//是id
            toastr.info('删除时最少需要选中一行!');
            return
        }
        $("#deleteModal").modal('show');
    }
    $(document).ready(function () {
        $(".contentBox").css({"height": $(document.body).height() - 20});
        $(window).resize(function () {//当浏览器大小变化时
            $(".contentBox").css({"height": $(document.body).height() - 20})
        });
        tableList()
    });
    //弹出框提示配置
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "2000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>
</body>
</html>